<template>
	<view class="box">
		<view class="inputbox">
			<image src="https://fangguaner.wm76.mtnet.ren/static/applet/sousuo.png" mode="" class="inputimg"></image>
			<input type="text" value="" placeholder="请输入要搜索的房子" />
		</view>
		<view class="hr">

		</view>
		<checkbox-group @change="checkboxChange">
			<view class="contss" v-for="(item,index) in arr" :key="index">
				<label>
					<checkbox :value="index" />
				</label>
				<view class="content">
					<image :src="item.img" mode="" class="tu"></image>
					<view class="brief">
						<view class="title">
							{{item.title}}
						</view>
						<view class="areas">
							<text>{{item.house_type}}</text>
							<text>{{item.building_area||item.house_area}}</text>㎡
							<text>{{item.orientation}}</text>
							<text>{{item.community_name}}</text>
						</view>

						<view class="">
							<view class="lablebox">
								<ColorfulLabel :labelArr='item.label'></ColorfulLabel>
							</view>
							<view class="pricebox">
								<view class="total" v-if="item.type==1">
									<text>{{item.price}}万</text>
								</view>
								<view class="price" v-if="item.type==1">
									{{item.unit_price}}元/m²
								</view>
								<view class="price" v-if="item.type==2">
									<text>{{item.price}}</text>元/月
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</checkbox-group>


		<view class="true" @click="truebtn">
			确认
		</view>
	</view>
</template>

<script>
	import {
		getbrokerhouselist
	} from "../../api/api/index.js"
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"

	export default {
		data() {
			return {
				page: 1,
				arr: [],
				priceshow: true,
				arrs: [],
				id: 0,
				type: ""
			}
		},
		onLoad(e) {
			this.id = e.id
			if (e.type == 1) {
				this.priceshow = true
				this.type = "二手房"
			} else {
				this.priceshow = false
				this.type = "租房"
			}
			let data = {
				type: this.type,
				limit: 4,
				page: this.page
			}
			getbrokerhouselist(data).then(res => {
				this.arr = res.data.map(v => {
					v.img = v.image
					v.title = v.name
					v.area = v.house_area
					// v.price = v.price
					return v
				})
			})
		},
		components: {
			ColorfulLabel
		},
		methods: {
			checkboxChange(e) {
				let numarr = e.detail.value
				let arrs = []
				this.arr.forEach((v, i) => {
					numarr.forEach((s) => {
						if (s == i) {
							arrs.push(v)
						}
					})
				})
				this.arrs = arrs
			},
			truebtn() {
				let that = this
				if (this.arrs.length != "") {
					if (this.arrs.length > 3) {
						uni.showToast({
							title: "一次最多选择三套",
							icon: "none",
							duration: 1500
						})
					} else {
						uni.setStorageSync("addarr", this.arrs)
						uni.showModal({
							title: "是否确定添加",
							success(res) {
								if (res.confirm == true) {
									uni.navigateBack({
										url: "pages/offer/index?id=that.id"
									})
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: "请选择房源",
						duration: 1500,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 头部搜索框 */
	.inputbox {
		margin-left: 29rpx;
		margin-right: 21rpx;
		margin-top: 23rpx;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border: solid 2rpx #dfdfdf;
		display: flex;
	}

	.hr {
		width: 100%;
		height: 15rpx;
		background-color: #ededed;
		margin-top: 19rpx;
	}

	.inputimg {
		width: 35rpx;
		height: 35rpx;
		margin-top: 23rpx;
		margin-left: 25rpx;
	}

	.inputbox>input {
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		margin-top: 14rpx;
		margin-left: 14rpx;
	}


	/* 房源信息 */
	.contss {
		display: flex;
		justify-content: space-between;
	}

	.content {
		display: flex;
		margin-left: 20rpx;
		margin-top: 44rpx;
	}

	.tu {
		width: 208rpx;
		height: 169rpx;
		border-radius: 10rpx;
	}

	.content>.brief {
		margin-left: 35rpx;
		width: 400rpx;
	}

	.brief>.title {
		font-size: 28rpx;
		color: #282828;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		font-stretch: normal;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.brief>.area {
		font-size: 22rpx;
		color: #878787;
		font-family: MicrosoftYaHei-Bold;
		margin-top: 10rpx;
	}

	.lablebox {
		display: flex;
	}

	.labeone {
		width: 71rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffdddc;
		font-size: 18rpx;
		display: inline-block;
		color: rgb(210, 73, 89);
	}

	.labletwo {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffefdc;
		font-size: 18rpx;
		color: #d88e35;
		margin-left: 7rpx;
	}

	.lablethree {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		background-color: #dcf8ff;
		border-radius: 16rpx;
		font-size: 18rpx;
		color: #33b1d0;
		margin-left: 7rpx;
	}

	.pricebox {
		display: flex;
		margin-top: 10rpx;
		/* margin-right: 34rpx; */
	}

	.total {
		color: #e13c35;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
		margin-right: 34rpx;
	}

	.total>text {
		font-size: 30rpx;
		font-weight: 700;
		font-family: PingFang-SC-Heavy;
		margin-right: 10rpx;
	}

	.price {
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #666666;
		margin-top: 12rpx;
	}

	label {
		margin-top: 95rpx;
		margin-left: 20rpx;
	}



	/* 确认 */
	.true {
		width: 100%;
		height: 100rpx;
		background-color: #fc7b63;
		border-radius: 5rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		font-family: MicrosoftYaHei;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 80rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.areas>text {
		margin-left: 5rpx;
		font-size: 20rpx;
	}
</style>
